{% load social_tags %}

<div class="NB-story-comment" data-id="{{ comment.id }}" data-user-id="{{ comment.user_id }}">
    <a href="{{ comment.user.feed_link }}" class="NB-user-avatar {% if comment.source_user_id %}NB-story-comment-reshare{% endif %}">
        <img src="{{ comment.user.photo_url }}">
    </a>
    <div class="NB-story-comment-author-container">
        {% if comment.source_user_id %}
            <div class="NB-story-comment-reshares">
                <a href="{{ comment.source_user.feed_link }}" class="NB-user-avatar" title="{{ comment.source_user.username }}">
                    <img src="{{ comment.source_user.photo_url }}">
                </a>
            </div>
        {% endif %}
        <a href="{{ comment.user.feed_link }}" class="NB-story-comment-username">{{ comment.user.username }}</a>
        <div class="NB-story-comment-date">{{ comment.shared_date }} ago</div>
        <div class="NB-story-comment-button NB-story-comment-reply-button">
            <div class="NB-story-comment-button-wrapper NB-story-comment-reply-button-wrapper">
                {% if comment.user.protected %}
                    <img src="{{ MEDIA_URL }}img/icons/circular/g_icn_lock.png" class="NB-reply-lock">
                {% endif %}
                reply
            </div>
        </div>
        {% if comment.user_id == user.pk %}
            <div class="NB-story-comment-button NB-story-comment-edit-button">
                <div class="NB-story-comment-button-wrapper NB-story-comment-edit-button-wrapper">edit</div>
            </div>
        {% endif %}
        <div class="NB-story-comment-likes">
            {% if comment.liking_user_ids or user.pk != comment.user_id %}
            <div class="NB-story-comment-like {% if user.pk in comment.liking_user_ids %}NB-active{% endif %}"></div>
            {% endif %}
            <div class="NB-story-comment-likes-users">
                {% for user in comment.liking_users %}
                    <a href="{{ user.feed_link }}" class="NB-user-avatar" title="{{ user.username }}">
                        <img src="{{ user.photo_url }}">
                    </a>
                {% endfor %}
            </div>
        </div>
        <div class="NB-story-comment-error"></div>
        <div class="NB-spinner"></div>
    </div>
    <div class="NB-story-comment-content">
        {{ comment.comments|safe|linebreaksbr }}
    </div>
    {% if comment.user.location %}
        <div class="NB-story-comment-location">{{ comment.user.location }}</div>
    {% endif %}

    {% if comment.replies %}
    <div class="NB-story-comment-replies">
        {% for reply in comment.replies %}
        <div class="NB-story-comment-reply" data-id="{{ reply.reply_id }}">
            <a href="{{ reply.user.feed_link }}">
                <img class="NB-user-avatar NB-story-comment-reply-photo" src="{{ reply.user.photo_url }}" />
            </a>
            <a href="{{ reply.user.feed_link }}" class="NB-story-comment-username NB-story-comment-reply-username">{{ reply.user.username }}</a>
            <div class="NB-story-comment-date NB-story-comment-reply-date">{{ reply.publish_date }} ago</div>
            {% if reply.user_id == user.pk %}
                <div class="NB-story-comment-button NB-story-comment-edit-reply-button">
                    <div class="NB-story-comment-button-wrapper NB-story-comment-edit-button-wrapper">edit</div>
                </div>
            {% endif %}
            <div class="NB-story-comment-reply-content">{{ reply.comments|safe }}</div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
